<template>
  <div class="container">
    <div class="banner-wrap">
      <swiper></swiper>
      <div class="category-box">
        <div class="w1300 flex-yc">
          <div class="category-wrap">
            <div class="category-side-bar-wrap box-shadow">
              <div
                class="category-item flex-yc flex-xbt"
                v-for="item in categoryData"
                :key="item"
              >
                {{ item }}
                <el-icon><ArrowRight /></el-icon>
                <div class="category-detail-wrap box-shadow"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="con bgc">
      <div class="w1300">
        <category></category>
        <category></category>
        <category></category>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Swiper from '@/pages/mall/components/SwiperCom.vue'
import Category from '@/pages/mall/views/index/components/CategoryCom.vue'
import { ref } from 'vue'

const categoryData = ref([
  '手机',
  '穿戴平板',
  '电脑',
  '耳机音箱',
  '智慧屏',
  '智能家居',
  '出行车品',
  '数码配件',
  '增值服务',
  '商用终端',
  '生态周边',
])
</script>

<style scoped lang="scss">
.container {
  .banner-wrap {
    position: relative;
  }

  .category-box {
    position: absolute;
    inset: 0;

    .w1300 {
      height: 100%;
    }

    .category-wrap {
      position: relative;
      width: 700px;

      .category-side-bar-wrap {
        width: 200px;
        padding: 10px 15px 10px 20px;
        background-color: #fff;

        .category-item {
          height: 40px;
          margin: 2px 0;
          font-size: 14px;
          color: #888;
          cursor: pointer;

          &:hover {
            color: #000;

            .category-detail-wrap {
              display: block;
            }
          }
        }
      }

      .category-detail-wrap {
        position: absolute;
        inset: 0 0 0 200px;
        display: none;
        width: 500px;
        background-color: #fff;
      }
    }
  }

  .con {
    padding-bottom: 40px;
  }
}
</style>
